

<template>
	<view>
		<luyj-tree
			:checkList="checkList"
			v-if="tree.length > 0 || isSearchMode"
			:max="1"
			:props="prop"
			@sendValue="confirm"
			:parent="true"
			:isCheck="isCheck"
			:trees="tree"
			@change="onChange"
			:loadApi="loadApi"
			:searchPlaceholder="searchPlaceholder"
            :renderName="renderName"
			ref="tree"
		>


		</luyj-tree>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '', // 标题名称
				tree: '',
				checkList: [],
				backList: this.checkList,
				max: 5,
                
				loadApi: '',
				searchPlaceholder: '搜索',
                renderName: '',

				isSearchMode: false,

				isCheck: {
					type: Boolean,
					default: true
				}, // 是否开启选择
				prop: {},
				aprop: {
					label: 'name',
					children: 'child',
					multiple: true
				},
				bprop: {
					label: 'name',
					children: 'child',
					multiple: true,
					checkStrictly: true
				},
				cprop: { //单选模式(任意一项)
					label: 'name',
					children: 'child',
					multiple: false,
					nodes: false
				},
				dprop: { //单选模式选user
					label: 'name',
					children: 'child',
					multiple: false,
					nodes: true
				}
			}
		},
		onLoad(option) {
			var currentPicked = uni.getStorageSync('currentPicked');
			var pickerOptions = uni.getStorageSync('pickerOptions') || [];
			this.tree = pickerOptions;

			if (option.loadApi) {
				this.loadApi = decodeURIComponent(option.loadApi);
				this.isSearchMode = true;
                this.filterMode = option.filterMode;
				this.searchPlaceholder = option.searchPlaceholder || '请输入关键字搜索';
                if (option.autoSearch) {
                   this.$nextTick(function(){
                       this.$refs.tree.confirmSearch();
                   })
                }
			}
            this.renderName = option.renderName || '';
			this.getParams({title: option.title || '请选择', type: 3, arr: currentPicked, isCheck: true, pickerOptions});
		},
		methods: {
			// =================================== 初始化 ========================================================================
			/** 获取初始化值
			 * @param {Object} options 参数
			 */
			onChange: function (value) {
				if (this.type == 3) {
					this.checkList = value;
					// debugger
					this.$refs.tree.checkList = this.checkList;
				}
			},
			getParams: function(option) {
				// 获取导航栏标题
				this.title = Boolean(option.title) ? option.title : '';
				uni.setNavigationBarTitle({
					title: this.title
				});
				// 获取列表有关参数
				try {
					// #ifdef H5
					let obj = option.arr.replace("\"([^\"]*)\"", "$1");
					let checkList = JSON.parse(obj);
					// #endif
					// #ifdef MP-QQ||MP-WEIXIN||APP-NVUE||APP-PLUS
					let checkList = option.arr;
					// #endif
					console.log("checkList=>", checkList);

					this.checkList = []
					this.checkList = checkList;
				} catch (e) {
					// console.log("获取数组报错" , e);
				}
				// debugger
				if (option.type == 0) {
					this.prop = this.aprop; //多选
				} else if (option.type == 1) {
					this.prop = this.bprop; //多选
				} else if (option.type == 2) {
					this.prop = this.cprop; //单选任意一项
				} else {
					this.max = 1;
					this.prop = this.dprop; //单选user
				}
				this.tree = option.pickerOptions; //树形数据赋值
				this.isCheck = option.isCheck != 'false' ? Boolean(option.isCheck) : false;
			},
			// =================================== 监听事件  =====================================================================
			//获取选中的值
			confirm(val, back) {
				// this.checkList = val;
				if (back) {
					this.backConfirm(val)
					return
				}
				this.backList = val;
			},
			/** 向上一页返回参数
			 * @param {Object} val
			 */
			backConfirm(val) {
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; //当前页面
				var prevPage = pages[pages.length - 2]; //上一个页面
				// #ifdef H5
				prevPage.$vm.query = val //h5写法
				// #endif
				let check = val;
				//#ifdef MP-WEIXIN||MP-QQ
				prevPage.setData({
					'callBackData': check,
				}) //小程序写法
				// #endif

				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
.box_sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.btn {
	position: fixed;
	bottom: 0;
	padding: 10px;
	background-color: #fff;
	width: 100%;

	.sureBtn {
		background-color: #0095f2;
		color: #fff;
	}
}

.content-item {
	display: flex;
	position: relative;
	align-items: center;

	.person {
		height: 64rpx;
		min-width: 64rpx;
		border-radius: 50%;
		border: 1rpx solid rgba(0, 149, 235, 0.15);
		background-color: rgba(0, 149, 235, 0.1);
		margin-left: 0px;
		color: #0095f2;
		line-height: 64rpx;
		font-size: 22rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.word {
		margin-left: 16rpx;
		font-size: 30rpx;
		color: #5b5757;
		width: 500rpx;
		word-break: break-all;
	}
}
</style>
